<template>
  <!-- <transition> -->
      <div  v-if="visible" class="mesage" :style="{ transform: `translateX(-50%)` }">
        <p class="a">{{ message }}</p>
      </div>
  <!-- </transition> -->
</template>
<script>
export default {
  name: 'Message',
  data () {
    return {
      visible: false,
      verticalOffset: 20,
      duration: 3000,
      timer: null,
      center: false,
      showClose: false,
      closed: false,
      show: false
    }
  },
  mounted () {
    this.$nextTick(() => {
      const a = document.querySelectorAll('.a')
      console.log(a)
    })
    this.close()
    this.autoClose()
    // const root = document.documentElement
    // root.style.setProperty('--topY--', this.verticalOffset * 30 + 'px')
  },
  beforeDestroy () {
    clearTimeout(this.timer)
  },
  watch: {
    closed (newVal) {
      if (newVal) {
        this.visible = false
      }
    }
  },
  computed: {
    positionStyle () {
      return {
        top: `${this.verticalOffset}px`
      }
    }
  },
  methods: {
    autoClose () {
      this.timer = setTimeout(() => {
        this.visible = false
        // this.$destroy(true)
        // this.$el.parentNode.removeChild(this.$el)
      }, this.duration)
    },
    close () {
      this.visible = true
      clearTimeout(this.timer)
    }
  }
}
</script>
<style scoped>
/* :root {
  --topY--:30px
} */
.mesage {
  position: relative;
  top:0;
  left: 50%;
  width: 100%;
}
.mesage p{
  display: inline-block;
  padding: 10px 20px;
  text-align: center;
  border: 1px solid rgb(145, 184, 199);
  position: relative;
  left: 50%;
  margin-top: 10px;
  border-radius: 15px;
  color: #888;
  opacity: 1;
}
/* .v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(-50%) translateY(--topY--);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
} */
</style>
